Exercise: Creating an HTML File

Below, we’ve included a Udacity HTML Live Preview Workspace, which will allow you to see a live version of your HTML code (and CSS once we get to it in a later lesson). You can also use a code editor like VS Code on your own computer, but these workspaces will allow you to do your work in the classroom environment as well.

First off, if you want more space, you can click “Expand” at the bottom of the workspace, and the workspace will switch to full-screen. We have included the instructions here within the Instructions.md file in the /home/workspace directory so you can still refer to them when the workspace is in full-screen mode.

The layout of this HTML Live Preview Workspace is as follows:

• On the left is the directory view. You can view any files in the current directory here. Additionally, you can click the + button at the top to either create or download files or folders. (That’s a hint for this first exercise)
• In the middle is the code window. Any files you click to open will be shown here, with tabs at the top to switch between open files. You can code here; the files will automatically save, and if applicable, update in the window on the right after a few seconds delay.
• On the right is the actual Live Preview. In this particular workspace, it defaults to always showing index.html, although until you actually create the file as part of the instructions, you will instead see the /home/workspace/ directory instead.

There is also a index-solution.html file already in the workspace that you can view if you get stuck, but make sure you first attempt a workspace before viewing the solution! Note this file will not show up in the Live Preview window unless you were to rename the file (in this case) to index.html (the file you should be doing your work in here).

Instructions

Create an index.html file and type in "Hello World" using a paragraph tag <p> and </p>. We'll cover more on the paragraph tag soon, but see here for more on this tag.